<template>
  <user-card-list :user-list="userList" />
  <van-empty v-if="!userList || userList.length < 1" description="搜索结果为空" />
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {useRoute} from 'vue-router';
import myAxios from '../plugins/myAxios';
import {Toast} from 'vant';
import qs from  'qs';  //处理请求参数的库
import UserCardList from '../components/UserCardList.vue';

const route = useRoute();
const {tags} = route.query;

const userList = ref([]);
//当组件挂载到页面后，立即发起异步请求搜索用户标签
onMounted(async () => {
  const userListData = await myAxios.get('/user/search/tags', {
    params: {
      tagNameList: tags
    },
    // 将 {tagNameList: ['js','vue','react']} 序列化为字符串
    // 最终发送的完整URL：/user/search/tags?tagNameList=js&tagNameList=vue&tagNameList=react
    paramsSerializer: params => {
      return qs.stringify(params, {indices: false})
    }
  })
      .then(function (response) {
        console.log('/user/search/tags succeed', response);
        return response?.data;
      })
      .catch(function (error) {
        console.error('/user/search/tags error', error);
        Toast.fail('请求失败');
      })
  console.log(userListData)
  // 将json数据转换成字符串展示
  if (userListData) {
    userListData.forEach(user => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }
})
</script>

<style scoped>

</style>